
<template>
  <transition name="fade">
    <view :class="{ 'full-screen': isFullScreen }" :style="{ backgroundColor }" class="mask" v-show="isActive">
      <view :style="{ transform:`translate(-50%, -${translateY}%)`}" class="spinner">
        <slot>
          <!--  ==========在这里改成选择的那一个========== -->
          <shrinkRect :color="color" :size="size" />
          <!-- <loop :color="color" :size="40" /> -->
          <!--  ==========在这里改成选择的那一个========== -->
        </slot>
        <view :style="{ color:textColor }" v-if="text.length">{{ text  }}</view>
      </view>
    </view>
  </transition>
</template>

<script>
// ==========在这里选一个你要的其他去掉也行==========
// import loop from './loaders/loop.vue'
// import bounce from './loaders/bounce.vue'
// import doubleBounce from './loaders/double-bounce.vue'
// import doubleCube from './loaders/double-cube.vue'
// import doubleDot from './loaders/double-dot.vue'
// import rotatePlane from './loaders/rotate-plane.vue'
// import scaleOut from './loaders/scale-out.vue'
import shrinkRect from './loaders/shrink-rect.vue'
// ==========在这里选一个你要的其他去掉也行==========

export default {
  name: 'ourLoading',
  components: {
    // ==========在这里选择一个==========
    // loop,
    // bounce,
    // doubleBounce,
    // doubleCube,
    // doubleDot,
    // rotatePlane,
    // scaleOut,
    shrinkRect,
    // ==========在这里选择一个==========
  },
  props: {
    active: Boolean,
    translateY: {
      type: Number,
      default: 50,
    },
    text: {
      type: String,
      default: '',
    },
    color: {
      type: String,
      default: 'rgb(136, 132, 132)',
    },
    textColor: {
      type: String,
      default: '#333',
    },
    isFullScreen: {
      type: Boolean,
      default: false,
    },
    backgroundColor: {
      type: String,
      default: 'rgba(255, 255, 255, .9)',
    },
    size: {
      type: Number,
      default: 30,
    },
  },
  data () {
    return {
      isActive: this.active || false,
    }
  },
  watch: {
    active (value) {
      this.isActive = value
    },
  },
}
</script>

<style scoped>
.mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 3000;
  transition: opacity 0.3s linear;
}

.full-screen {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>